/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-04 11:11:37
 * @LastEditTime: 2022-05-04 17:14:47
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'
import {nanoid} from "nanoid";
import { connect } from "react-redux";
import { pushPerson } from '../../redux/actions/person'

class Person extends Component {
  pushPerson = () => {
    this.props.pushPerson({ id: nanoid(), name: this.nameRef.value, age: this.ageRef.value })
  }
  render() {
    return (
      <div>
        <h1>但前累计值：{this.props.count}</h1>
        <input type="text" ref={e => this.nameRef = e} />
        <input type="text" ref={e => this.ageRef = e} />
        <button onClick={this.pushPerson}>添加</button>
        <ul>
          {this.props.personData.map(item => <li key={item.id}>{item.name}----{item.age}</li>)}
        </ul>
      </div>
    )
  }
}
export default connect(
  (state) => ({ personData: state.person, count: state.count }),
  {
    pushPerson
  }
)(Person)